<template>
  <div id="GeneralGroup" class="group innerPageTable-out-flex">
    <!-- 搜索区域 -->
    <SelfAdaption v-if="!useTableSearchBar">
      <!-- search bar -->
      <Form
        :model="condition"
        ref="conditionForm"
        slot="adaption-bar"
        label-position="top"
        class="ivu-form-no-margin-bottom"
        inline
      >
        <template>
          <!-- 用户组编码 -->
          <Form-item prop="groupCode" :label="$t('module.general.groupCode')">
            <Input
              type="text"
              clearable
              :maxlength="30"
              v-model="condition.groupCode"
              :placeholder="$t('module.general.tip.groupCode')"
              @on-enter="searchHandler"
            ></Input>
          </Form-item>

          <!-- 用户组名 -->
          <Form-item prop="groupName" :label="$t('module.general.groupName')">
            <Input
              type="text"
              clearable
              :maxlength="30"
              v-model="condition.groupName"
              :placeholder="$t('module.general.tip.roleTip')"
              @on-enter="searchHandler"
            ></Input>
          </Form-item>

          <!-- 查询\重置按钮 -->
          <Form-item prop="button" class="search-solt-btn">
            <RPButton optType="search" @click="searchHandler" />
            <RPButton optType="reset" @click="resetHandler" />
          </Form-item>
        </template>
      </Form>
    </SelfAdaption>
    <InnerPageTable :config="configs" ref="groupRef">
      <!-- handler bar 查询/重置-->
      <!--
      <div slot="handle-bar">
        <RPButton optType="search" @click="searchHandler" />
        <RPButton optType="reset" @click="resetHandler" />
      </div>
      -->
      <!-- table bar 添加/删除-->
      <div slot="table-bar">
        <RPButton optType="create" @click="editUserGroup({})" />
        <RPButton optType="batch" @click="deleteSelectAll" />
      </div>
      <Form
        v-if="useTableSearchBar"
        :model="condition"
        ref="conditionForm"
        slot="table-search-bar"
        class="ivu-form-no-margin-bottom"
        inline
      >
        <template>
          <!-- 用户组编码 -->
          <Form-item prop="groupCode">
            <Input
              type="text"
              clearable
              :maxlength="30"
              v-model="condition.groupCode"
              :placeholder="$t('module.general.tip.groupCode')"
              @on-blur="searchHandler"
              @on-enter="searchHandler"
              @on-clear="searchHandler"
            ></Input>
          </Form-item>

          <!-- 用户组名 -->
          <Form-item prop="groupName">
            <Input
              type="text"
              clearable
              :maxlength="30"
              v-model="condition.groupName"
              :placeholder="$t('module.general.tip.roleTip')"
              @on-blur="searchHandler"
              @on-enter="searchHandler"
              @on-clear="searchHandler"
            ></Input>
          </Form-item>
        </template>
      </Form>
    </InnerPageTable>
  </div>
</template>
<script>
import locales from './locales.js'
import { findGroupList, deleteUserGroup } from '@/api/userGroupApi'
// import { findTenantList } from "@/api/teantManageAPI";
import { GGCoulmns } from './coulmns'
import UserGroupEdit from './UserGroupEdit.vue' //加扩展名后， vscode 可以自动跳入代码文件
import GroupPersonManage from './GroupPersonManage'
import { CoreModuleName } from '@/const.js'
import { getValueSetCode } from '@/api/valuesetCodeApi.js'
// import SelectPerson from '@/components/common/SelectPersonBridge';

export default {
  name: 'general-group',
  mixins: [locales],
  data: () => ({
    condition: {
      groupName: '',
      groupCode: '',
      groupId: '',
      tenantId: ''
      // productId: "",
    },
    showInfoModal: true,
    infoModalData: {},
    selectionsID: []
  }),
  computed: {
    configs() {
      const { condition } = this
      return {
        loadDataFn: findGroupList,
        columnsFn: GGCoulmns.bind(this),
        onSelectionChange: this.pageTableSelection,
        initParam: { condition }
      }
    }
  },
  created() {
    this.initData()
  },
  methods: {
    async initData() {
      this.searchHandler()
    },
    searchHandler(page = 1) {
      this.$nextTick(() => {
        this.$refs.groupRef.load(this.condition, page)
      })
    },
    resetHandler() {
      this.$refs.conditionForm.resetFields(1)
      this.condition.groupName = ''
      this.condition.tenantId = ''
      this.searchHandler()
    },
    deleteHandler(ids) {
      this.$confirm
        // 删除提示级别：普通
        .warning(this.$t('module.general.confirmToDelete'))
        .then(async () => {
          await deleteUserGroup(ids)
          this.$message.success({
            content: this.$t('common.deleteSuccess'),
            duration: 3
          })
          this.searchHandler()
        })
        .catch(() => {
          // this.$message.error({
          //   content: this.$t("common.deleteFailed"),
          //   duration: 3
          // });
        })
    },
    editUserGroup(row) {
      new this.$pageModal(
        UserGroupEdit,
        {
          props: { info: row }
        },
        reload => reload && this.searchHandler(this.$refs.groupRef.param.pageNum)
      )
    },
    userManageHandler(row) {
      const props = { row }
      new this.$sidelipPage(GroupPersonManage, { props }, v => v && this.searchHandler())
    },
    pageTableSelection(tabeVal) {
      // 获取所有选中项
      this.selectionsID = []
      tabeVal.forEach(item => {
        this.selectionsID.push(item.id)
      })
    },
    deleteSelectAll() {
      // 批量删除(数组转字符串传值)
      if (this.selectionsID.length > 0) {
        // const deleIds = this.selectionsID.join(',')
        this.deleteHandler(this.selectionsID)
      } else {
        this.$message.error({
          content: this.$t('common.warning.selctElement'),
          duration: 3
        })
      }
    },
    singleDelete(id) {
      this.selectionsID = []
      this.selectionsID.push(id)
      this.deleteHandler(this.selectionsID)
    }
  }
}
</script>
<style>
.ivu-tag-blue,
.ivu-tag-red {
  cursor: no-drop !important;
}
</style>
<style lang="less">
#GeneralGroup {
  .search-bar {
    .ivu-input-wrapper-small .ivu-input-icon {
      height: 34px;
      line-height: 34px;
    }

    .ivu-form-item .ivu-form-item-content {
      width: calc(~'100% - 80px');
    }
  }

  .search-bar > div:first-child {
    padding-right: 180px;
  }

  .search-bar > div:last-child {
    position: absolute !important;
    right: 0;
    width: 170px;
    height: 100%;
    margin: 0;

    > div {
      position: absolute;
      bottom: 12px;
      display: flex;
    }
  }

  .run-search-bar > div:last-child {
    button:first-child {
      margin-left: 0;
    }

    button:last-child {
      margin-left: 18px;
    }
  }
}
</style>
